<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>
<script>
export default {
  name: 'Person',
  setup(){
    // 定义数据
    let name = '张三'
    let age = 18
    let tel = '13888888888'
    // 定义方法
    function changeName(){
      name = 'zhang-san' //注意：这里的name，页面是没有变化的
      console.log(name)   //name确实改了，但不是响应式的
    }
    function changeAge(){
      age +=1
    }
    function showTel(){
      alert(tel)
    }

    return{name,age,changeName,changeAge,showTel}
    //return()=>'哈哈’ setup的返回值也可以是一个渲染函数
//并且在data与methods中，能调用setup，但必须加this.
  }
}
</script>

<style >
.person {
  background-color: burlywood;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}
</style>
